<template>
  <div class="box">
    <input type="file" name="" id="" @change="change">
    <hr>
    {{ aaa }}
  </div>

  <myTable :prop_list="prop_list.list" :prop_keys="prop_keys.list" v-if="prop_keys.list" ></myTable>
</template>
<script setup>
import { reactive, ref }  from 'vue'
  import * as XLSX from "xlsx";
import myTable from './components/myTable.vue'

  let prop_keys = reactive({
    list: ''
  })

  let prop_list = reactive({
    list: ''
  })

  let aaa = reactive({
    a: 1,
    b: 2
  })

  let bbb = JSON.parse((JSON.stringify(aaa)))
  console.log( bbb );
  // setTimeout(() => {
  //   bbb.a = 222
  // }, 1000);

  function change (e) {
    let start_time = Date.now()

    let file = e.target.files[0]
    let size =  file.size / 1024 / 1024
    console.log( '大小:', size, 'M' );

    var rABS = false; //是否将文件读取为二进制字符串

    var reader = new FileReader();
    //if (!FileReader.prototype.readAsBinaryString) {
    FileReader.prototype.readAsBinaryString = function (f) {
      var binary = "";
      var rABS = false; //是否将文件读取为二进制字符串
      var wb; //读取完成的数据
      var outdata;
      var reader = new FileReader();
      reader.onload = function (e) {
        var bytes = new Uint8Array(reader.result);
        var length = bytes.byteLength;
        for (var i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i]);
        }
        //此处引入，用于解析excel
        if (rABS) {
          wb = XLSX.read(btoa(fixdata(binary)), {
            //手动转化
            type: "base64"
          });
        } else {
          wb = XLSX.read(binary, {
            type: 'binary',
            codepage: 936
          });
        }
        outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        console.log( outdata, 2222222222 );
        console.log('xlsx 用时:', (Date.now() - start_time) / 1000, 'S', '平均:', size / ((Date.now() - start_time) / 1000)  );

        let title_index = outdata.findIndex((item, index) => Object.values( item ).includes( '基本信息'))
        console.log( 'title_index', title_index );
        let keys = Object.values(outdata[title_index + 1]).map((item, index) => index + item )

        console.log( keys );

        let list = outdata.filter((item, index) => index >= title_index + 2).map((item, index) => {
          let obj = {}
          let item_values = Object.values(item)
          item_values.forEach((val, i) => {
            obj[keys[i]] = val
          })
          obj.index = index
          return obj
        })

        console.log( list );

        keys.unshift('index')
        prop_keys.list = keys.map(item => {
          return {
            dataKey: item,
            key: item,
            title: item,
            width: 150
          }
        })
        
        prop_list.list = list
        console.log( prop_list.list, prop_keys.list, 111 );
        

        // console.log( list[0][0 + keys[0]], list[0]['19左眼(OS)'] );

        console.log( '数组 用时:', (Date.now() - start_time) / 1000, 'S' );
      };
      reader.readAsArrayBuffer(file);
    };
    if (rABS) {
      reader.readAsArrayBuffer(file);
    } else {
      reader.readAsBinaryString(file);
    }
    console.log( reader, 1111111 );
  }
</script>

<style lang='scss' scoped>
  .box{
    outline: 1px solid red;
    width: 100%;
  }
</style>